<template>
  <div>
    <el-card class="box-card myecharts" style="overflow: visible">
      <div slot="header" class="clearfix">
        <span>系统功能操作统计</span>

        <el-button :class="this.selectedTime === 2? 'title2_tabs title2_tabs_on' : 'title2_tabs'"
                   style="float: right; padding: 3px 0" type="text" @click="handleChange(2)">过去12个月
        </el-button>
        <el-button :class="this.selectedTime === 1? 'title2_tabs title2_tabs_on' : 'title2_tabs'"
                   style="float: right; margin-right:10px;padding: 3px 0" type="text" @click="handleChange(1)">过去30天
        </el-button>
        <el-button :class="this.selectedTime === 0? 'title2_tabs title2_tabs_on' : 'title2_tabs'"
                   style="float: right; padding: 3px 0" type="text" @click="handleChange(0)">过去7天
        </el-button>

      </div>
      <div class="text item">
        <div id="operCount" style="width: 100%;height: calc(100vh - 695px)"></div>
      </div>
    </el-card>
  </div>
</template>

<script>
  import echarts from 'echarts'
  import { operCount } from '@/api/home'

  let that
  export default {
    name: 'OperCount',
    data() {
      return {
        selectedTime: 0,
        xAxisData: [],
        legends: [],
        series: [],
        myChart:null,
      }
    },
    mounted() {
      this.getData()
      this.draw()
      that = this
    },
    methods: {
      draw() {
        let myChart = echarts.init(document.getElementById('operCount'))
        var option = {
          color: ['#768dd1', '#a7d691', '#fbd379', '#f18585', '#8fcde5', '#fd9d75', '#679df6', '#ffb65f', '#85c569', '#f87462', '#a5a5ef', '#f4e498'],
          legend: {
            orient: 'vertical',
            type: 'scroll',
            left: 'left'
          },
          tooltip: {
            trigger: 'item'
          },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['stack', 'bar', 'line', 'tiled'] },
              restore: { show: true },
              saveAsImage: { show: true }
            }
          },
          calculable: true,
          yAxis: [
            /*{
              type: 'value',
              show: true,
              splitNumber: 5,//（将y轴最大值平均成5个点）
              //interval: 50000,  // maxValue为你计算出来的值， 即数组中的最大值
              axisLabel: {
                show: true // 显示Y轴标签
              }
            }*/
          ],
          series: this.series
        }
        // console.log(option)
        myChart.setOption(option, { notMerge: true })
        window.onresize = function() {
          myChart.resize()
        }

        window.addEventListener('resize', () => {
          myChart.resize()
        })
      },
      getData() {
        operCount({ timeType: this.selectedTime }).then(res => {
          console.log('operCount>>>>', res)
          this.series = []
          let option = {
            name: '访问量',
            type: 'pie',
            left:100,
            radius: '70%',
            smooth: true,
            animation: true, // 启用动画
            animationDuration: 1000, // 动画时长，单位为毫秒
            animationEasing: 'cubicInOut', // 缓动函数
            itemStyle: { normal: { areaStyle: { type: 'default' } } },//背景
            data: []
          }
          option.data = res.data
          this.series.push(option)
          this.draw()
        }).catch(errMsg => {
          console.error(errMsg)
        })
      },
      handleChange(time){
        // console.log(time)
        this.selectedTime = time
        this.getData()
      },
    }
  }
</script>

<style scoped>

</style>
